<template>
  <div class="news">
    <p class="p-head">搜索结果：</p>
    
    <div class="big-box" v-if="cpList">
      <div class="right-box">
        <!-- <comProduct v-bind:productList="cpList"></comProduct> -->
        <div class="fresh-list-box">
        <div class="list" v-for="item in cpList" @click="godetail(item.category,item.id)">
          <!-- :to="{name:'product-detail', params:{cpid: item.id}}" -->
          <div class="img"><img :src="comimgsrc+item.preview"></div>
          <div class="name">{{item.name}}</div>
          <div class="mid-box">
            <p class="price">￥{{item.price}}/{{item.unit}}</p>
            <p class="fenlei" v-if="item.category==1">鲜果汇</p>
            <p class="fenlei" v-else>凉山特产</p>
          </div>
        </div>
      </div>
      </div>
    </div>
    <p v-else style="text-align:center;font-size: 22px;line-height:60px;">没有搜索到任何的产品，重新搜索吧</p>
    
  </div>
</template>

<script>
import compage from '@/components/common/compage';
import qs from "qs"
export default {
  name: 'App',
  data(){
    return{
      comimgsrc:'http://api.mountainfreshes.com',
      cpList:[]
    }
  },
  methods:{
    getsearch:function(){
      this.$http.post("/index.php/index/search/search",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
                  search_name: this.$route.query.cpid

              }))
              .then(res => {
                this.cpList = res.data.row
                console.log(this.cpList)
              })
              .catch(error => {
                alert("网络错误")
              });
    },
    godetail:function(fl,id){
        if(fl == 1){
          this.$router.push({ name: 'freshDetail', query:{cpid: id} })
        }else{
          this.$router.push({ name: 'specialtyDetail', query:{cpid: id} })
        }
    }
  },
  components:{
    compage
  },
  created(){
    this.getsearch();
  },
  watch:{
          '$route' (to, from) {
                // this.getinfo()
               //   const toDepth = to.path.split('/').length
                // const fromDepth = from.path.split('/').length
                // this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
                // console.log(to.name)
                if(to.name == 'searchpage'){
                  this.getsearch();
                }
              }
        }
}
</script>

<style scoped lang="less">
.news{
  width: 1200px;
  height: auto;
  zoom: 1;
  overflow: hidden;
  margin: auto;
  .p-head{
    font-size: 20px;
    color: #333;
  }

}
.big-box{
  width: 100%;
  margin-top: 32px;
  height: auto;
  zoom: 1;
  .right-box{
    width: 1200px;
    height: auto;
    zoom: 1;
    overflow: hidden;
    margin: auto;
  }
}
.fresh-list-box{
    width: 100%;
    height: auto;
    zoom: 1;
    overflow: hidden;
    .list{
      width: 234px;
      height: 298px;
      float: left;
      box-sizing:border-box;
      border: 1px solid #d0d0d0;
      margin-left: 11px;
      margin-bottom: 12px;
      cursor: pointer;
      .img{
        display: block;
        width: 100%;
        height: 200px;
        img{
          width: 100%;
          height: 100%;

        }
      }
      .name{
        width: 92%;
        height: 26px;
        line-height: 26px;
        margin: 2px auto;
        font-size: 16px;
        color: #202020;
        overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
      }
      .mid-box{
        width: 92%;
        margin: auto;
        float: left;
        margin-left: 4%;
        p{
          font-size: 16px;
          color: #333;
          float: left;
          line-height: 24px;
        }
        .fenlei{
          float: right;
          color: #54b84c;
        }
      }
    }
  }
</style>
